@CHARSET "UTF-8";
@import url("base.css");
@import url("open.css");
@import url("table.css");
@import url("board.css");

html { min-width:1000px; }
body { background-color:#A3B6D6; height:100%; }

.akddd { color:blue; }
.gaeri { color:#ff4827; }
.red { color:red; }


#ajax_loading {
	position:absolute;	
	background-color:#EEE;
	opacity: .7; filter:Alpha(Opacity=70);
	z-index:9999991;
	width:100%;
	
	left:1px;
	top:1px;
}

#ajax_loading_img {
	position:absolute;
	width:100px;
	height:100px;
	/*
	top:30%;
	left:50%;
	margin:-50px 0 0 -50px;
	*/
	background: url(../images/ajax-loader.gif) no-repeat;
	
	text-indent: -99999px;	
}


.ui-bar-c {
	background: 			#e9eaeb;
	color: 					#3E3E3E;
	font-weight: bold;
	text-shadow: 0 1px 1px 	#fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e9eaeb)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #f0f0f0, #e9eaeb); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #f0f0f0, #e9eaeb); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #f0f0f0, #e9eaeb); /* IE10 */
	background-image:      -o-linear-gradient(top, #f0f0f0, #e9eaeb); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #f0f0f0, #e9eaeb);
}



#wrap {  width:100%; height:100%; min-height:100%; }

/**********************
	상단
***********************/
#header { 
	width:100%;
	background-color: #38465C;
	box-shadow: inset 0 -2px 3px #191919;
    color: white;
    height:50px; 
}

#header h1 { 
	background:url(../images/icons/ballons.png) no-repeat left center; 
	font-size: 16px; 
	display: inline-block; 
	margin: .8em 10px;  
	padding: 3px 0 3px 40px;  
	outline: 0 !important; 
} 

#header .logined { float:right; margin-right:10px; margin: 10px .8em; }
#header .logined .info { display:inline-block; }
#header .logined .image { display:inline-block; }
#header .logined .image .login, #header .logined .image .logout { cursor: pointer; } 


/**********************
	본문
***********************/
#body { display:table; table-layout:fixed; width:100%; overflow: auto; }
#body #body_container { height:100%; }

/* 왼쪽 메뉴 */
#left { z-index:1; display:table-cell; width:200px; }
#left menu { padding:0px; margin:0; overflow:hidden; white-space:nowrap; }
#left menu ul li { border:0px; border-bottom:1px solid #B3B3B3; border-right:1px solid #B3B3B3; }
#left menu ul li a { display:inline-block; padding:8px 0; width:100%; white-space:nowrap; }
#left menu ul li a img.icon { padding:0 8px 0 14px; }

#left menu ul li:last-child { border-top:0px; }
#left menu ul li.current { 
	background-color:white;
	/*border-right:1px solid white;*/
	font-weight: bold;
    text-shadow: 0 1px 1px #FFFFFF;
}



/* 본문 컨텐츠 */
#container {
	display:table-cell;
	min-height:100%; 
	z-index:2; 
	vertical-align:top;
	width:100%;
}


/***************
	공통사항
****************/
.btn_left { display:inline-block; margin-left:10px; }
.btn_right { float:right; margin-right:10px; }
.icon_button { padding:8px 5px 8px 25px; }


a.icon_button, a.button, button {
	padding:5px 5px 5px 25px;
	border:1px solid #DFE0DE;
	border-radius:.3em;
	-moz-border-radius:.3em;
	-webkit-border-radius:.3em;
	cursor:pointer;
}

#container section.section { width:100%; min-height:500px; height:100%; display:table; table-layout:fixed; overflow:auto; background-color:white; box-shadow:0 -1px 8px #333333; }


/* 리스트 */
#container section.section .container { /*padding:10px;*/ display:table-cell; z-index:3; overflow:hidden; }
#container section.section .list_container { display:table; width:100%; height:100%; }
#container section.section ul.list { overflow:hidden;  display:table-row; height:100%;  }
#container section.section ul.list li { border-bottom:1px solid #B3B3B3; }
#container section.section ul.list li.no_list { padding:20px 10px; text-align:center; }

#container section.section ul.list li a.article { padding:4px 8px; display:block; }
#container section.section ul.list li a.article.current { background-color:#f7f7f7; }

#container section.section ul.list li a.article .title { display:table; table-layout:fixed; width:100%; }
#container section.section ul.list li a.article .title h3 {
	display:table-cell;
	margin:0px; padding:8px 0; 
	color:#4F76A3; /*font-size:1em;*/
	
	overflow:hidden; white-space:nowrap;
	text-overflow:ellipsis;		/* IE, Safari */
	-o-text-overflow:ellipsis;
}
#container section.section ul.list li a.article .title div.buttons { display:table-cell; width:50px; padding-right:10px; text-align:right;}
#container section.section ul.list li a.article .title div.buttons button { text-indent:-9999px; border:0px; padding:0 0 0 15px; }

#container section.section ul.list li a.article .description p { font-size:.85em; }

/*
#container section.section ul.list li a p.writer { margin:0px; font-size:.8em; display:inline-block; padding:3px; }
#container section.section ul.list li a p.date { text-align:left; margin:0px; font-size:.8em; padding:3px 18px 3px 3px; float:right; }
*/

#container section.section .list_footer { 
	box-shadow : 0px -2px 5px #A6A6A6;
	background:-webkit-gradient(linear, 0% 20%, 0% 100%, from(#FFFFFF), to(#B0B0B0));
	background:-moz-linear-gradient(0% 20% 270deg, #FFFFFF, #B0B0B0);
	
	height:30px !important;
	border-top:1px solid #cccccc;
}

#container section.section .list_footer a { border:0px; }
#container section.section .list_footer button { border:0px; }

#container section.section .list_footer .btn_left ul.paging li { display:inline-block; }
#container section.section .list_footer .btn_left ul.paging li a.page { border:1px solid #cccccc; padding:2px 5px; background-color:white; }
#container section.section .list_footer .btn_left ul.paging li a.page.icon_button { padding:2px 5px; }
#container section.section .list_footer .btn_left ul.paging li a.page.current { background-color:transparent; }
#container section.section .list_footer .btn_left ul.paging li a.page:hover { background-color:#B0B0B0; }

#container section.section .list_footer .paging_setting { display:inline-block; margin-left:10px; }
#container section.section .list_footer .paging_setting input.ls { padding:2px; margin:3px 0; width:20px; text-align:right; }


#container section.section .list_footer .btn_right a.writes { background:url(../images/icons/user_add.png) no-repeat 5px; text-indent:-9999px; display:inline-block; margin-top:3px; }
#container section.section .list_footer .btn_right button.search { background:url(../images/icons/search.png) no-repeat center; text-indent:-9999px; }

/* 게시물 [페이지가 독립적으로 열릴수도 있음] */
/* article은 기본적으로 hidden 되어 있어야됨 */
#container article.article { 
		display:none; vertical-align:top; z-index:4;
		box-shadow : 0px -1px 10px #333333;
}
#container article.article.show { display:table-cell; }

/* 게시물 container */
#container .article_container { padding:0px; display:table; height:100%; width:100%; }

/* 글 보기 상단 */
#container .article_header {
	display:table-row;
	
	background:-webkit-gradient(linear, 0% 20%, 0% 100%, from(#FFFFFF), to(#B0B0B0));
	background:-moz-linear-gradient(0% 20% 270deg, #FFFFFF, #B0B0B0);
}
#container .article_header h4 { font-weight:normal; padding:15px 15px 15px 37px; font-size:1.2em; display:inline-block; }
#container .article_header .close { float:right; margin:8px 7px 7px 7px; }
#container .article_header .close button { background:url(../images/icons/close.png) no-repeat 5px; border:0px; text-indent:-9999px; padding-left:15px; }

/* 글 보기 */
#container div.article { height:100%; display:table-row; background-color:white; }

/* 글 보기 하단 */
#container .article_footer {
		
		background:-webkit-gradient(linear, 0% 20%, 0% 100%, from(#FFFFFF), to(#B0B0B0));
		background:-moz-linear-gradient(0% 20% 270deg, #FFFFFF, #B0B0B0);
		
		box-shadow : 0px -2px 5px #A6A6A6;
		border-top:1px solid #cccccc;
		height:30px !important;
}

#container .article_footer a { border:0px;  display:inline-block; }
/*
#container .article_footer .btn_left  button.refresh { border:0px; text-indent : -9999px; background:url(../images/icons/reload.png) no-repeat center; }
*/
#container .article_footer .next_prev { display:inline-block; margin-left:50px; }
#container .article_footer .next_prev  a.prev_article { background:url(../images/icons/left.png) no-repeat 5px; }
#container .article_footer .next_prev  a.next_article { background:url(../images/icons/right.png) no-repeat 5px; }

#container .article_footer .btn_right a.comment { background:url(../images/icons/comment_edit.png) no-repeat 5px; text-indent:-9999px; }
#container .article_footer .btn_right a.modify { text-indent:-9999px; padding:5px 12px; }
#container .article_footer .btn_right a.delete { text-indent:-9999px; padding:5px 12px; }
#container .article_footer .btn_left a.refresh { text-indent:-9999px; padding:5px 12px; }




/**********************
	로그인
***********************/
.login_form input { 
	width:95%; 
	border-radius: 3px 3px 3px 3px; 
	border: 1px solid #B6B6B6;
	display: inline-block;
    line-height: 20px; 
    margin-bottom:8px;
}

.login_form button[type="submit"] {
    width:100%;
}

/* 웹페이지에서 호출된 경우 */
section.login { background-color:white; position:absolute; width:400px; height:200px; top:50%; left:50%; margin-left:-200px; margin-top:-100px; border:2px solid #8b8b8b; }
section.login .login_title { font-size:1.2em; padding-bottom:5px; }
section.login .login_title * { font-size:1.2em; }
section.login .container { padding:20px; text-align:center; }
section.login input { padding:10px 5px; width:90%; margin:5px; }
section.login .button { text-align:right; margin:8px;}
